<template>
  <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div>
      <div class="info-item">
        <!-- <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <h3>基本信息</h3>
          </a-space>
        </div> -->
        <TitleBox title="基本信息" style="width: 95%"></TitleBox>
        <div style="width: 100%; display: flex; justify-content: center"
          ><a-form
            style="width: 60%"
            ref="formRef"
            :model="form"
            auto-label-width
          >
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="生产出库单号:"
                  ><a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.pickNumber"
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item required label="生产计划号：">
                  <a-input
                    style="width: 320px"
                    disabled
                    v-model="form.producePlanNumber"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="计划用料时间："
                  ><a-date-picker
                    placeholder="系统自动生成"
                    :style="{ width: '320px' }"
                    v-model="form.planDate"
                    disabled
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="下达人："
                  ><a-input
                    :style="{ width: '320px' }"
                    v-model="form.saleName"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="出库状态："
                  ><a-typography-text
                    :type="
                      form.outboundState === 5
                        ? 'success'
                        : form.outboundState === 6
                        ? 'warning'
                        : 'Primary'
                    "
                  >
                    {{
                      form.outboundState === 5
                        ? '已出库'
                        : form.outboundState === 6
                        ? '异常出库'
                        : '未出库'
                    }}
                  </a-typography-text></a-form-item
                >
              </a-col>
              <a-col :span="12">
                <a-form-item label="领料状态："
                  ><a-typography-text
                    :type="form.state === 1 ? 'secondary' : 'success'"
                  >
                    {{ form.state === 1 ? '待领料' : '已领料' }}
                  </a-typography-text></a-form-item
                >
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="生产质检状态："
                  ><a-typography-text
                    :type="form.inspectionState === 1 ? 'secondary' : 'success'"
                  >
                    {{
                      form.inspectionState === 1
                        ? '待质检'
                        : form.inspectionState === 2
                        ? '通过质检'
                        : form.inspectionState === 3
                        ? '部分通过质检'
                        : '不通过质检'
                    }}
                  </a-typography-text></a-form-item
                >
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <a-space :size="50"><h3>物料出库明细 ：</h3></a-space>
          </a-space>
        </div> -->
        <TitleBox title="物料出库明细" style="width: 95%"></TitleBox>
        <div
          style="
            width: 90%;
            margin-left: 5%;
            box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
            border-radius: 4px;
          "
        >
          <div style="padding: 30px">
            <div style="text-align: right" class="button-item"></div>
            <a-table :data="form.pickItem" :pagination="false">
              <template #columns>
                <a-table-column :width="80" align="center">
                  <template #title> 序号 </template>
                  <template #tr> </template>
                  <template #cell="{ rowIndex }">
                    <div style="position: relative">
                      <div>{{ rowIndex + 1 }}</div>
                    </div>
                  </template>
                </a-table-column>
                <a-table-column
                  title="物料编码"
                  :width="100"
                  data-index="managementNumber"
                  align="center"
                >
                </a-table-column>
                <a-table-column
                  title="物料名称"
                  :width="100"
                  data-index="managementName"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="规格型号"
                  :width="100"
                  data-index="spec"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="基本单位"
                  :width="100"
                  data-index="basicName"
                  align="center"
                ></a-table-column>
                <a-table-column title="领料数量" :width="100" align="center"
                  ><template #cell="{ record }">
                    <a-input-number
                      :min="1"
                      disabled
                      v-model="record.pickAmount" /></template
                ></a-table-column>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';

  import { getOneProducePick } from '@/api/produce-management/produce-pick/index';
  import { cloneDeep } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import { useOrderStore } from '@/store';

  const OrderStore = useOrderStore();
  //   import SelectDetail from './select-detail/index.vue';

  const router = useRouter();
  const route = useRoute();
  const tableRef = ref();
  const title: string = '生产领料详情页';
  const breadCrumb: string[] = [
    '库存管理',
    '出库管理',
    '销售发货出库',
    '生产领料详情页',
  ];
  const id = Number(route.query.id);
  const form = ref<any>({});

  // 表格配置
  const args = reactive({
    stripe: false,
    scroll: {
      y: 2000,
      x: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const getProduct = async () => {
    try {
      const res = await getOneProducePick({ id });
      form.value = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  getProduct();
</script>

<style scoped lang="less">
  .basic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(242, 243, 245, 0.852);
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }

  .info-item {
    width: 100%;
  }

  .report-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
  }

  .order-info {
    width: 95%;
    margin: 20px auto;
  }

  :deep(.arco-form) {
    width: 90%;
  }
</style>
